<template>
  <Menu ref="wzNav" :active-name="wzNavName" accordion theme="dark" :open-names="wzOpenNames" @on-select="openView"  width="auto" >
    <template v-for="(item,index) in menuList">
      <!--  子集 > 1 循环渲染   -->
      <template v-if="item.children.length > 0">
        <Submenu :name="item.id">
          <template #title>
            <span>{{item.name}}</span>
          </template>
          <!--循环子级 -->
          <recursionNav :navData="item" />
        </Submenu>
      </template>
    </template>
  </Menu>
</template>
<script>


import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'
import {getMenu} from "@/util/getMenu";
//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

import recursionNav from "../views/recursionNav.vue";//菜单




//reactive
export default defineComponent({
  name: 'iviewNav',//组件名称
  components: {
    recursionNav,
  },//组件引用
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const $common = inject('$common');//自己封装的方法
    const router = useRouter();//路由跳转使用


    const state = reactive({
      menuList:[],//菜单数据
      wzNavName:'',
      wzOpenNames:[],

      wzNav:ref(),//菜单
    });





    //监听
    watch(() => router,(news, old) => {
      state.wzNavName = router.currentRoute.value.name;
    },{deep: true});



    //通过子集 找父级
    const menuExpansion =  (name, list, obj)=> {//菜单展开
      // 匹配名称 循环数组  本身对象  父级对象
      let that = this;
      let menusList = [];
      for (let i = 0; i < list.length; i++) {
        if (!!list[i].children && list[i].children.length > 0) {
          if (!!list[i].name) {
            menusList.push(list[i].id);
          }
          let data = menuExpansion(name, list[i].children, list[i]);
          if (data.length > 0) {
            menusList = menusList.concat(data);
            return menusList;
          } else {
            menusList = [];
          }
        } else {
          if (list[i].menuUrl == name) {
            menusList.push(obj.menuUrl);
            return menusList;
          }
        }
      }
      return menusList;
    }




    //菜单跳转
    const menuJump = (data)=>{
      if(!!data.target){
        //target 打开方式
        //  _blank:外部链接   _innerblank:外部打开内部路由
        if(data.target == '_blank'){
          window.open(data.menuUrl, '_blank')
        }else{
          window.open('#/' + data.menuUrl, '_blank')
        }
      }else{
        router.push({ path:'/' + data.key, query: {}})
      }
    }

    //菜单选择
    const openView = (data)=>{

      menuJump(selectNav(data,state.menuList))
      // state.menuList.fields
      // console.log(state.menuList.fields((item)=>{console.log(item)}))

      // :to="titem.menuUrl"
    }

    // 获取全部点击数据
    const selectNav = (data,list)=>{
      for (let i = 0; i < list.length; i++) {
        if(!!list[i].children && list[i].children.length > 0){
          let a = selectNav(data,list[i].children)
          if(!!a){
            return  a;
          }
        }else{
          if(data == list[i].menuUrl){
            return list[i];
          }
        }
      }


      // list.map((k,i)=>{
      //   if(!!k.children && k.children.length > 0){
      //     let a = selectNav(data,k.children)
      //     if(!!a.id){
      //       return  a;
      //     }
      //   }else{
      //     if(data == k.menuList){
      //       return k;
      //     }
      //   }
      // })
      // return {};
    }



    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

      let menuList = (JSON.parse(sessionStorage.getItem('loginData')).userMenu.modules[0].menus).filter(item => !item.menuHide)

      // k.menuHide
      state.menuList = $common.convertTree(menuList,{
        value:'menuUrl',
        title:'name',
        children:'children',
      });

      console.log(state.menuList)


      state.wzNavName = router.currentRoute.value.name;

      state.wzOpenNames = menuExpansion(state.wzNavName,state.menuList)

      nextTick(()=>{
        state.wzNav.updateOpened()
        state.wzNav.updateActiveName()

      })


    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      menuJump,//菜单跳转
      openView,
    }
  }
})


</script>
<style lang="less">
</style>
